<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
    :close-on-click-modal="false"
  >
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="角色名" prop="roleName">
        <el-input v-model="form.roleName" />
      </el-form-item>
      <el-form-item label="权限字符" prop="roleKey">
        <el-input v-model="form.roleKey" />
      </el-form-item>
      <el-form-item label="排序" prop="roleSort">
        <el-input-number v-model="form.roleSort" :min="1" :max="99"></el-input-number>
      </el-form-item>
      <el-form-item label="菜单">
        <div class="vab-tree-border">
          <el-tree
            :data="menuOptions"
            show-checkbox
            ref="menu"
            node-key="id"
            empty-text="加载中，请稍候"
            :props="defaultProps"
          ></el-tree>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { doEdit, doAdd, getOne } from "@/api/roleManagement";
import { getSelectTree, getSelectTreeByroleId ,getMenusIds} from "@/api/menuManagement";

export default {
  name: "RoleManagementEdit",
  data() {
    return {
      form: {
        roleName: "",
        roleKey: ""
      },
      defaultProps: {
        children: "children",
        label: "label"
      },
      rules: {
        role: [{ required: true, trigger: "blur", message: "请输入角色码" }]
      },
      title: "",
      dialogFormVisible: false,
      menuOptions: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    showEdit: async function(row) {
      if (!row) {
        this.title = "添加";
        const {
          data
        } = await getSelectTree();
        this.menuOptions = data;
      } else {
        this.title = "编辑";
        this.menuOptions = [];
        // TODO
        // const roleMenu = getSelectTreeByroleId(row.id);
        const roleMenuIds = getMenusIds (row.id);
        getOne(row.id).then(Response => {
          this.form = Response.data;
          this.$nextTick(() => {
            getSelectTree().then(res => {
              this.menuOptions = res.data
              for (let roleMenuIdsKey in roleMenuIds) {
                this.$refs.menu.setChecked(roleMenuIdsKey);
              }
              roleMenuIds.then(res => {
                for (let roleMenuIdsKey in res.data) {
                  this.$refs.menu.setChecked(res.data[roleMenuIdsKey],true,false);
                }
              })
            })
          })
        });

      }
      this.dialogFormVisible = true;
    },
    close() {
      this.$refs["form"].resetFields();
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
    },
    async fetchData() {

    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    save: function() {
      // 具体业务请自行调整
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          if (this.form.id != undefined) { // 编辑
            console.log("编辑");
            console.log(this.form.id != undefined);
            this.form.menuIds = this.getMenuAllCheckedKeys();
            const { message } = await doEdit(this.form)
            this.$baseMessage(message, "success", "vab-hey-message-success");
            this.$emit("fetch-data");
            this.close();
          } else { // 新增
            console.log("新增");
            this.form.menuIds = this.getMenuAllCheckedKeys();
            const { message } = await doAdd(this.form);
            this.$baseMessage(message, "success", "vab-hey-message-success");
            this.$emit("fetch-data");
            this.close();
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.vab-tree-border {
  height: 200px;
  padding: $base-padding;
  overflow-y: auto;
  border: 1px solid #dcdfe6;
  border-radius: $base-border-radius;
}
</style>
